import React, { useEffect, useState } from 'react';
import { Card, Button, Table, Pagination, Modal, Form, Input, Upload } from 'antd';
import { PlusOutlined, RedditOutlined, DeleteOutlined,LoadingOutlined } from '@ant-design/icons';
import './index.less'
import { reqTrademarkGet, reqAddTrademark,reqDeleteIt,reqEditTrademark } from '@/api/trademark/index'
export default function Trademark() {

    const getAllList = async (current: number, pageSize: number) => {
        let result = await reqTrademarkGet(current, pageSize)
        // console.log(result);
        SetAllList(result.records)
        Settotal(result.total)
    }
    const getAddList = async () => {
        let result = await reqAddTrademark({ tmName: username, logoUrl })
    }
    const exitTra = async()=>{
        let result = await reqEditTrademark({ tmName: username, logoUrl,id })
    }

    // ----------------------------对话框
    const [isModalOpen, SetisModalOpen] = useState(false)
    const onCancel = () => {
        SetisModalOpen(false)
    }
    const onOk = () => {
        if(id){
            exitTra()
            getAllList(current, pageSize)
            
        }else{
            getAddList()
            getAllList(1, pageSize)
        }
        SetisModalOpen(false)

    }
    const onValuesChange = (changedValues: any, allValues: any) => {
        // 变化的值，所有变化的值
        if (changedValues.username) {
            Setusername(changedValues.username)
        }
    }

    // 上传的回调
    const [loading, setLoading] = useState(false);
    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div style={{ marginTop: 8 }}></div>
        </div>
    );
    const handleChange = (info: any) => {
        console.log(info);

        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            console.log(info.file.originFileObj);
            setLoading(false);
            Setlogourl(info.file.response.data);
        }
    };

    // ----------------------------添加
    let [from] = Form.useForm()
    const [username, Setusername] = useState()
    const [logoUrl, Setlogourl] = useState()
    const addBtn = () => {
        from.resetFields()
        Setusername('')
        Setlogourl('')
        SetisModalOpen(true)
    }
    // ----------------------------
    const [allList, SetAllList] = useState<any>([])
    // -----------------------------分页
    const [pageSize, SetpageSize] = useState(3)
    const [current, Setcurrent] = useState(1)
    const [total, Settotal] = useState(66)
    const [id,SetId]= useState()
    const onChange = (page: number, pageSize: number) => {
        console.log(page, pageSize);
        SetpageSize(pageSize)
        Setcurrent(page)
        // 直接传page,pageSize，要不会有延迟
        getAllList(page, pageSize)
    }
    //删除
    const delect=async(row:any)=>{
        console.log(row);
        let result = await reqDeleteIt(row.id)
        getAllList(current, pageSize)
    }
    //编辑
    const exit = (row)=>{
        console.log(row);
        Setusername(row.tmName)
        Setlogourl(row.logoUrl)
        SetId(row.id)
        console.log(id,username,logoUrl);
        
        SetisModalOpen(true)
    
    }
    useEffect(() => {
        getAllList(current, pageSize)
    }, [])

    // -----------------------------
    const dataSource: any = allList
    const columns: any = [
        {
            title: '序号',
            width: '100px',
            render: (text: any, records: any, index: any) => {
                // records一定是data中的每一个数据对象
                // index 是data中每一个数据对象的下标
                return index + 1
            },
        },
        {
            title: '品牌名称',
            render: (text: any, records: any, index: any) => {
                // records一定是data中的每一个数据对象
                // index 是data中每一个数据对象的下标
                return records.tmName
            },
        },
        {
            title: '品牌LOGO',
            render: (records: any) => (
                <img src={records.logoUrl} width="80px" height="60px"></img>
            )
        },
        {
            title: '操作',
            render: (a,row,index) => (
                <div>
                    <Button type="primary" icon={<RedditOutlined />} style={{ background: '#e6a23c', marginRight: 10, border: 'none' }} onClick={()=>exit(row)}></Button>
                    <Button type="primary" icon={<DeleteOutlined />} style={{ background: '#f56c6c', border: 'none' }} onClick={()=>delect(row)}></Button>
                </div>
            )
        }
    ]
    return (
        <div className="site-card-border-less-wrapper">
            <Card bordered={true} title={<Button type="primary" onClick={addBtn} icon={<PlusOutlined />}>添加</Button>} hoverable >
                <Table dataSource={dataSource} columns={columns} bordered pagination={false} /><br />
                <Pagination
                    total={total}
                    current={current}
                    pageSize={pageSize}
                    pageSizeOptions={[3, 5, 10]}
                    showSizeChanger
                    showQuickJumper
                    showTotal={total => `共 ${total} 条`}
                    onChange={onChange} />
            </Card>
            <Modal title={id?"添加品牌":'修改品牌'} visible={isModalOpen} onCancel={onCancel} onOk={onOk}>
                <Form
                    name="basic"
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 20 }}
                    initialValues={{ remember: true }}
                    autoComplete="off"
                    onValuesChange={onValuesChange}
                    form={from}
                >
                    <Form.Item
                        label="用户名"
                        name="username"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="品牌LOGO"
                        name="logoUrl"
                    >
                        <Upload
                            name="file"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            action="/dev-api/admin/product/upload"
                            // beforeUpload={beforeUpload}
                            onChange={handleChange}
                        >

                            {logoUrl ? <img src={logoUrl} alt="file" style={{ width: '100%' }} /> : uploadButton}

                        </Upload>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}
